<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>IQC来料月报</title>
    <link rel="stylesheet" href="/3nod_web/layui/css/layui.css" media="all">
</head>
<body>
<link rel="stylesheet" type="text/css" href="/3nod_web/css/formSelects-v4.css" />
<div id="content">
    <input type="hidden" th:value="${modelKey}" id = "modelKeyArryas">
    <input type="hidden" th:value="${selectShipper}" id = "selectShipper">
    <h1>IQC来料月报</h1>
    <a href="/3nod_web/exportSuppliedMaterialsCheckMonthReport">
        <button class="layui-btn  layui-btn-sm">导出</button>
    </a>
    <div>
        <form class="layui-form" action="">
            <div class="layui-form-item" style="margin-top: 20px">
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input"
                               th:value="${startTime}"
                        >
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input"
                               th:value="${endTime}">
                    </div>
                </div>

                <div class="layui-inline ">
                    <label class="layui-form-label">货主</label>
                    <div class="layui-input-inline " style="width: 168px;">
                        <select name="shipper"lay-filter="shipper" id="shipper">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class=" layui-inline">
                    <label class="layui-form-label">机型</label>
                    <div class="layui-input-inline " style="width: 300px;">
                        <select id="modelKey" lay-search name="modelKey"  xm-select="select1">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <input id="huanweiType"  lay-filter="huanweiType" type="checkbox" name="" title="华为机型" lay-skin="primary">
                </div>

            </div>

        </form>

        <div  style="margin-left: 100px;display: inline-block">
            <div class="layui-inline">
                <button id="search" class="layui-btn layui-btn-sm">搜索</button>
            </div>
            <div class="layui-inline" >

                <button class="layui-btn layui-btn-sm" onclick="toInspectionMonthChart()">
                    按月生成合格率柱状图
                </button>
            </div>
        </div>
    </div>
    <div th:if="${#lists.isEmpty(session.suppliedMaterialsCheckMonthReportVo)}">
        <h1 align="center">请输入开始时间和结束时间</h1>
    </div>
    <div th:if="${not #lists.isEmpty(session.suppliedMaterialsCheckMonthReportVo)}">

        <!--数据展示-->
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>项目</th>
                <th th:each="month:${session.monthList}"><span th:text="${month}"></span>月</th>
                <th>合计</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>来料总批数</td>
                <td th:each="suppliedMaterialsCheckMonthReport:${session.suppliedMaterialsCheckMonthReportVo}"
                    th:text="${suppliedMaterialsCheckMonthReport.checkQty}"></td>
                <td th:text="${session.sumMap['checkQtySum']}"></td>
            </tr>
            <tr>
                <td>合格批数</td>
                <td th:each="suppliedMaterialsCheckMonthReport:${session.suppliedMaterialsCheckMonthReportVo}"
                    th:text="${suppliedMaterialsCheckMonthReport.okQty}"></td>
                <td th:text="${session.sumMap['okQtySum']}"></td>
            </tr>
            <tr>
                <td>不合格批数</td>
                <td th:each="suppliedMaterialsCheckMonthReport:${session.suppliedMaterialsCheckMonthReportVo}"
                    th:text="${suppliedMaterialsCheckMonthReport.ngQty}"></td>
                <td th:text="${session.sumMap['ngQtySum']}"></td>
            </tr>
            <tr>
                <td>合格率</td>
                <td th:each="suppliedMaterialsCheckMonthReport:${session.suppliedMaterialsCheckMonthReportVo}"
                    th:text="${suppliedMaterialsCheckMonthReport.percentOfPass+'%'}"></td>
                <td th:text="${session.sumMap['percentOfPassSum']+'%'}"></td>
            </tr>
            <tr>
                <td>目标值>99.00%</td>
                <td th:each="suppliedMaterialsCheckMonthReport:${session.suppliedMaterialsCheckMonthReportVo}">99.00%
                </td>
                <td>99.00%</td>
            </tr>
            </tbody>
        </table>
        <div/>
    </div>
    <table class="layui-hide" id="demo" lay-filter="demo"></table>
    <script src="/3nod_web/js/jquery-1.8.3.js" charset="utf-8"></script>
    <script src="/3nod_web/layui/layui.js" charset="utf-8"></script>
    <script src="/3nod_web/js/formSelects-v4.min.js" charset="utf-8"></script>
    <script>

        layui.use('form', function () {
            var form = layui.form;
            getShipper();
            // 货主change事件
            form.on('select(shipper)', function (data) {
                $("#modelKeyArryas").val("");
                getModelKey();
            });
            //华为机型回显
            if($("#modelKeyArryas").val()=='JX00000142,JX00000143'){
                $("#huanweiType").prop("checked","checked");
            }
            form.render();
        });


        function toInspectionMonthChart() {
            window.open("/3nod_web/report/iqc/chart/inspectionMonthChart", "_blank");
        }

        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
        });

        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#startTime'//指定元素
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#endTime'//指定元素
            });
        });


        $('#search').on('click', function () {
            searchConditions();
        });

        //按回车提交
        $(".layui-input-inline").keydown(function (e) {//当按下按键时
            if (e.which == 13) {//.which属性判断按下的是哪个键，回车键的键位序号为13
                searchConditions();
            }
        });

        function searchConditions() {
            var startTime = $("#startTime").val();
            var endTime = $("#endTime").val();
            //获取下拉框的值
            var formSelects = layui.formSelects;
            var modelKey = $("#modelKey").val();
            if ($("#huanweiType").prop("checked")) {
                modelKey = 'JX00000142,JX00000143';
            } else {
                modelKey = formSelects.value('select1', 'valStr');
            }
            var shipper = $("#shipper").val();
            location.href = '/3nod_web/report/suppliedMaterialsCheckMonthReport?startTime='
                + startTime + "&endTime=" + endTime + "&modelKey=" + modelKey + "&shipper=" + shipper;
        }

        //货主下拉框
        function getShipper(){
            $.get("/3nod_web/report/getShipper",function (res) {
                for(var i =0;i<res.data.length;i++){
                    $("#shipper").append("<option value=\""+res.data[i]+"\">"+res.data[i]+"</option>");
                }
                $("#shipper").val($("#selectShipper").val());
                //重新渲染
                layui.form.render("select");
            });
        }

        //机型下拉框
        function getModelKey(){
            var shipper = $("#shipper").val();
            $("#modelKey").empty();
            $.get("/3nod_web/report/getModelKey?shipper="+shipper,function (res) {
                for(var i =0;i<res.data.length;i++){
                    $("#modelKey").append("<option value=\""+res.data[i].modelKey+"\">"+res.data[i].modelName+"</option>");
                }
                //重新渲染
                layui.formSelects.render("select");
                var modelKeyStr= $("#modelKeyArryas").val();
                var modelKeyArryas=modelKeyStr.split(',');
                layui.formSelects.value('select1', modelKeyArryas);
            });
        }
    </script>


</body>
</html>